<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { useI18n } from "vue-i18n";

import { getInfoAPI, getShopBalancedAPI, getItemIdByUserIdAPI, } from "@/server/api/userInfo";
import { updateInfoPlAPI, addShopSumAPI } from "@/server/api/rechargeOrder";

import { getUploadBalance } from "@/server/api/itemInfo";

import { useUseStore } from "@/stores/user";
import { ItemShopStore } from "@/stores/ItemAnShop";

import { ToastFun } from "@/hook/toast";

/*
&注册区
*/
const userStore = useUseStore();
const userInfome = ref({}); //定义用户余额数据
const route = useRoute();
const router = useRouter();
const ItemShop = ItemShopStore();
const quantityItem = ref(null);
const quantityShop = ref(null);

const { t } = useI18n();

let data = JSON.parse(route.query.data);

const { orderId, price } = data;
const orderSize = route.query.orderSize;
/*
&函数区域
*/
//定义item下单接口函数
const updateInfoPl = async (id) => {
  ToastFun("Loading", { duration: 1000 });
  const res = await updateInfoPlAPI(id);

  if (res.data.code == 200) {
    ToastFun("", {});

    useUseStore().Upload = Number(quantityItem.value) + Number(orderSize); // 增加额度
    router.push({ path: "Successful", query: { price: route.query.price } });
  } else {
    ToastFun("", {});
  }

  // console.log(res);
};

//定义shop下单接口函数
const addShopSum = async (id) => {
  try {
    ToastFun("Loading", { duration: 1000 });
    const res = await addShopSumAPI(id);

    if (res.data.code === 200) {
      ToastFun("", {});

      useUseStore().shopUpload = Number(quantityShop.value) + Number(orderSize);; // 增加额度
      router.push({ path: "Successful", query: { price: route.query.price } });
    } else {
      ToastFun("", {});
    }

    // console.log(res);
  } catch (error) {
    console.error("发生错误:", error);
  }
};

// 获取用户余额数据
const getInfo = async () => {
  ToastFun("Loading", { duration: 1000 });
  const { data } = await getInfoAPI(userStore.userId);

  if (data.code == 200) {
    ToastFun("close", {});
    userInfome.value = data.data;
  } else {
    ToastFun("", {});
    router.back();
  }
};

// 点击付款函数
const pay = () => {
  const { IdtStatus } = ItemShop;

  const paymentSuccess = userInfome.value.pointBalance > price;

  if (IdtStatus === "item") {
    paymentSuccess
      ? updateInfoPl(orderId)
      : ToastFun("show", { msg: t("order.tips") });
  } else {
    paymentSuccess
      ? addShopSum(orderId)
      : ToastFun("show", { msg: t("order.tips") });
  }
};

// 获取用户itemId
const getItemIdByUserId = async () => {
  const { data } = await getItemIdByUserIdAPI(userStore.userId);
  // console.log("itemID", res.data.data);

  if (data.code == 200 && data.data !== null) {
    useUseStore().itemId = data.data;

    getUpload(); // 获取item上架次数调用
  }
};

// 获取item次数
const getUpload = async () => {
  const res = await getUploadBalance(useUseStore().itemId);
  // console.log("获取item次数", res.data.data);
  quantityItem.value = res.data.data;
};

// 获取shop次树
const getShopBalanced = async () => {
  const res = await getShopBalancedAPI(userStore.userId);
  // console.log("shop次数", res);
  quantityShop.value = res.data.data;
};

onMounted(() => {
  getInfo();
  getItemIdByUserId();
  getShopBalanced();
});
</script>

<template>
  <!-- 主体模块 -->
  <main class="payOrders">
    <top-button-center :title="$t('order.payTitle')" style="background-color: transparent" />

    <!-- 个人模块 -->
    <div class="price">
      <h5><b> eCNY</b> {{ price }}</h5>
    </div>

    <div class="card">
      <h5>{{ $t("order.wait") }}</h5>
    </div>

    <footer>
      <div class="pay" @click="pay">{{ $t("order.pay") }}</div>
    </footer>
  </main>
</template>

<style lang="scss" scoped>
.payOrders {
  font-size: 14rem;
  position: relative;
  background-color: #f5f5f5;
  height: 100vh;

  .card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 10rem;
    margin: 20rem 10rem 0;
    background-color: #fff;
    border-radius: 10rem;

    h5 {
      font-size: 20rem;
      font-weight: 500;
    }
  }

  .price {
    padding: 90rem 0 50rem;

    h5 {
      text-align: center;
      font-size: 40rem;
      color: #642e8e;

      b {
        font-size: 16rem;
      }
    }
  }
}

footer {
  .pay {
    position: fixed;
    bottom: 0rem;
    left: 0;
    right: 0;
    margin: 0 16rem 20rem;
    text-align: center;
    height: 40rem;
    line-height: 40rem;
    color: #fff;
    background-color: #642e8e;
    border-radius: 5rem;
    font-size: 16rem;
  }
}
</style>
